<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: green;
            margin-top: 50px;
        }

        .border {
            border: 10px solid black;
            width: 200px;
        }
    </style>
</head>
<body>
<!--
        类选择器            通过class选择元素，（选择到的是一组元素）
           语法            .classname{样式}
           注意            页面中的class是可以重名的，可以重复利用，
                          一个元素可以有多个class,每个class之间用空格隔开，
                          如果后面class与前面的class样式有重复，那么后面会覆盖前面的；



-->
<div class="box"></div>
<p class="box border"></p>
<section class="box border"></section>
</body>
</html>